<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深浅拷贝</title>
</head>
<body>
    
    <script>
        //内存分区 分为 栈区，堆区，全局静态区，只读区
//         1、栈区
//           1）存放的数据：局部变量，形参，被调用函数的地址（这个可以不用管）等等。
//           2）特点：
// 读取速度快，存储和释放的思路是按照数据结构中的栈进行的，存数据就是压栈，释放就是弹栈。
// 空间小，基本类型的数据占用空间的大小不会随着值的改变而改变，而且占用空间小。
// 2、堆区
//         1）、存放数据：new出来的数据。
//         2）、特点：
// 读取速度慢
// 空间大：引用类型的数据大小是动态的，会随着数据的增加而改变大小
// 3、全局静态区：
// 1）、存放数据：全局变量和静态变量
// 2）、特点：在程序运行过程中，数据会一直在内存中。
// 4、只读区：
// 1）、存放数据：常量区存放常量，代码区存放程序的代码（程序运行时是需要载入到内存中允许的）
//            2）、特点：此区域的数据在程序运行过程中肯定不能改变。
        let obj = { x:1,y:2,z:{a:1,b:2}};
//   浅拷贝（Shallow Copy）
// 浅拷贝是指只复制对象的第一层属性，如果属性是基本数据类型（如数字、字符串、布尔值），则直接复制值；
// 如果属性是引用数据类型（如对象、数组），则复制引用地址，即两个对象共享同一块内存地址。
// 因此，如果一个对象内部含有另一个对象作为属性，那么使用浅拷贝后，新对象对于内部对象属性的修改会影响到原对象。
let obj1={a:1,b:{c:2}};
//let obj2={a:2,b:1}
let obj2={...obj1};

obj2.a=3;
console.log('obj1',obj1);
console.log('obj2',obj2);
//   深拷贝（Deep Copy）
//深拷贝不仅复制了对象的第一层属性，而且递归地复制了对象的所有层级。
//即原对象和新对象内部所有的引用数据类型都不会共享同一块内存地址。
//修改新对象的内部对象属性不会影响到原对象

let obj3={a:1,b:{c:2}};
let obj4=JSON.parse(JSON.stringify(obj3));
obj4.b.c=3;
console.log('obj3',obj3);
console.log('obj4',obj4);
    </script>
</body>
</html>